<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 腾讯地图组件 -->
  <view class="page-map-h5">
    <view
      class="goOut"
      @click="onGoBack"
    >
      返回
    </view>
    <iframe
      id="mapPage"
      width="100%"
      height="95%"
      frameborder="0"
      :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&policy=1&key=${key}&referer=myapp`"
    />
  </view>
  <!-- end 腾讯地图组件 -->
</template>

<script setup>

// 地图定位
const key = import.meta.env.VITE_APP_MAP_KEY
onMounted(() => {
  window.onmessage = function (event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    const loc = event.data
    if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      uni.setStorageSync('bbcLocInfo', loc)
      onGoBack()
    }
  }
})

const onGoBack = () => {
  uni.navigateBack(1)
}

</script>

<style lang="scss" scoped>
@use './map-h5.scss';
</style>
